<template>
  <div
    class="list-pointer"
    :style="{ 'padding-left': item.level * 4 + 'px' }"
    :class="{ ['level-' + item.level]: item.level > 0 }"
  >
    {{ item.value }}
  </div>
</template>
<script setup lang="ts">
const props = defineProps({
  item: {
    type: Object,
    default: () => ({})
  }
})
</script>
<style lang="scss" scoped>
.list-pointer {
  color: #565b66;
  font-size: 14px;
  line-height: 1.8;

  &.level-1 {
    padding-left: 0px;
    font-weight: 600;
    margin-top: 8px;
    &::before {
      display: none;
    }
  }
}
.list-pointer::before {
  display: inline-block;
  content: '';
  width: 8px;
  height: 8px;
  background: #1763ff;
  border-radius: 50%;
  margin-right: 6px;
  position: relative;
  top: -1px;
}
</style>
